<template>
	<view class="w-100">
		<view class="flex-1 article-head fixed-top bg-white">
			<view class="flex-1" :style="'height:' + statusBarHeight + 'px;'"></view>
			<view class="flex-1 row-ac py-2 mx-3">
				<view class="flex-1 row-ac">
					<view class="iconfont icon-back2-01" @click="toBack"></view>
					<view class="row-ac ml-2">
						<image :src="articleInfo.user_headimage" mode="" class="head-img"></image>
						<view class="ml-2">
							<view class="font-s-45 font-w">{{ articleInfo.user_nickname || articleInfo.user_username }}
							</view>
							<view class="font-s-2 mt text-light-grey">{{ articleInfo.create_time }}</view>
						</view>
					</view>
				</view>
				<view class="follow-box row font-s-2" :class="{ 'bg-color': isFollowing }" v-if="articleInfo.user !== user_id">
					<view v-if="isFollowing" @click="cancelFollow(followId)">已关注</view>
					<view v-else><text class="iconfont icon-jiahao" @click="getFollow(articleInfo.user)"></text>关注</view>
				</view>
			</view>
		</view>
		<view class="flex-1" :style="'height:' + headHeight + 'px;'"></view>
		<!-- <view class="flex-1 swiper-height" v-if="articleInfo.image_list && articleInfo.image_list.length > 0">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="flex-1 swiper-height">
				<swiper-item class="flex-1 swiper-height" v-for="(item, index) in articleInfo.image_list" :key="index">
					<view class="flex-1 swiper-height">
						<image :src="item.url" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view> -->
		<view class="flex-1 mx-3 mt-3">
			<view class="font-s-5 font-w">{{ articleInfo.title }}</view>
		</view>
		<view class="flex-1 mt-3 mx-3">
			<rich-text :nodes="articleInfo.content" class="my-rich-text"></rich-text>
		</view>
		<view class="flex-1 mt-2 mx-3" v-if="articleInfo.image_list && articleInfo.image_list.length > 0">
			<view class="flex-1 mb-2" v-for="(item, index) in articleInfo.image_list" :key="index">
				<image :src="item.url" mode="widthFix"></image>
			</view>
		</view>
		<view class="flex-1" style="height: 65px;"></view>
		<view class="w-100 foot-box fixed-bottom border-top">
			<view class="flex-1 mx-3 row-ac mt-2">
				<view class="flex-1 row-a-j-fc " :class="likedState == true ? 'color-two' : 'color-one'"
					@click="takeLike">
					<view class="iconfont " :class="likedState == true ? 'icon-like2-01' : 'icon-like-01'"></view>
					<view class="font-s-1 mt">{{ articleInfo.likes_count }}</view>
				</view>
				<view class="flex-1 row-a-j-fc" :class="collectState == true ? 'color-two' : 'color-one'"
					@click="takeCollect">
					<view class="iconfont " :class="collectState == true ? 'icon-heart-2-01' : 'icon-heart1'"></view>
					<view class="font-s-1 mt">{{ articleInfo.collect_count }}</view>
				</view>
				<view class="flex-1 row-a-j-fc color-one" @click="tapComment">
					<view class="iconfont icon-kefuxiaoxi"></view>
					<view class="font-s-1 mt">{{ articleInfo.comment_count }}</view>
				</view>
				<view class="flex-1 row-a-j-fc color-one">
					<view class="iconfont icon-fenxiang1"></view>
					<view class="font-s-1 mt">分享</view>
				</view>
			</view>
		</view>
		<leson-popup :popupStatu="lesonpopup" @statusChanged="handleStatusChanged">
			<view class="flex-1" v-if="commentState" @touchmove.stop.prevent>
				<view class="flex-1 mx-3 row font-s-3" style="height: 38px;">
					{{ articleInfo.comment_count }}条评论
				</view>
				<view class="flex-1 mx-3">
					<scroll-view scroll-y class="flex-1" :style="'height:' + popupHeight + 'px;'"
						@scrolltolower="scrolltolower">
						<view class="flex-1 d-f mb-3" :id="'comment-' + item.id" v-for="(item,index) in commentList"
							:key="index">
							<view class="user_headimage">
								<image :src="item.user_headimage" mode=""></image>
							</view>
							<view class="flex-1 ml-2 mt-1">
								<view class="font-s-4 text-light-grey">{{ item.user_nickname || item.user_username }}
								</view>
								<view class="mt-1 font-s-45 mr-2 comment-content">{{ item.content }}</view>
								<view class="row-ac-sb mt-2 text-light-muted flex-1 mr-3">
									<view class="row-ac font-s-35 ">
										<view>{{ item.create_time }}</view>
										<view class="ml-3" @click="replyUser(item)">回复</view>
									</view>
									<view class="row-ac font-s-3 ">
										<view class="iconfont icon-heart-2-01"></view>
										<view class="ml-1">0</view>
									</view>
								</view>
								<view class="mt-3" v-if="item.child_comments.length > 0">
									<view class="flex-1 mt-1 d-f" v-for="(parent, index1) in item.child_comments"
										:key="index1">
										<view class="child_headimage">
											<image :src="parent.user_headimage" mode=""></image>
										</view>
										<view class="flex-1 ml-2 mt-1">
											<view class="row-ac text-light-grey">
												<view class="font-s-4">
													{{ parent.user_nickname || parent.user_username }}
												</view>
												<view class="iconfont icon-bofang mx-1" style="font-size: 10px;"
													v-if="parent.highest_parent !== parent.parent_reply"></view>
												<view class="font-s-4"
													v-if="parent.highest_parent !== parent.parent_reply">
													{{ parent.parent_user_nickname || parent.parent_user_username }}
												</view>
											</view>
											<view class="mt-1 font-s-45 mr-2 comment-content">{{ parent.content }}
											</view>
											<view class="row-ac-sb mt-1 text-light-muted flex-1 mr-3">
												<view class="row-ac font-s-35 ">
													<view>{{ parent.create_time }}</view>
													<view class="ml-3" @click="replyUser(parent)">回复</view>
												</view>
												<view class="row-ac font-s-3 ">
													<view class="iconfont icon-heart-2-01"></view>
													<view class="ml-1">0</view>
												</view>
											</view>
										</view>
									</view>
									<view class="font-s-3 mt-2 text-light-muted" @click="expandComment(item.id)"
										v-if="item.comment_count > item.child_comments.length"><text
											class="mr-2">——</text>
										查看更多回复</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="flex-1 border-top row" style="height: 52px;">
					<view class="bottom-button-box flex-1 ml-4 mr-3 row-ac">
						<input class="px-3 py-2 flex-1" :placeholder="userNickname" v-model="formComment.content" />
						<view class="iconfont icon-aite1 ml-2"></view>
						<view class="iconfont icon-biaoqingfuhao ml-2"></view>
						<view class="send-box row ml-2" @click="sendComment">发送</view>
					</view>
				</view>
			</view>
			<view class="flex-1" v-if="!commentState" @touchmove.stop.prevent>
				<view class="flex-1 mx-3 row font-s-3" style="height: 38px;">评论回复</view>
				<view class="flex-1 mx-3">
					<scroll-view scroll-y class="flex-1" :style="'height:' + popupHeight + 'px;'"
						@scrolltolower="scrolltolower" style="touch-action: none;">
						<view class="flex-1 font-s-45 pb-3 d-f">
							<view class="user_headimage">
								<image :src="commentDetail.user_headimage" mode=""></image>
							</view>
							<view class="flex-1 ml-2 mt-1">
								<view class="mt-1 font-s-45 mr-2 comment-content">{{ commentDetail.content }}</view>
							</view>
						</view>
						<view class="flex-1" style="height: 12rpx; background-color: #f4f4f4;"></view>
						<view class="flex-1 row font-s-4 font-w py-3">{{ commentDetail.comment_count }}条回复</view>
						<view class="flex-1 d-f mb-3" v-for="(item,index) in parentList" :key="index">
							<view class="user_headimage">
								<image :src="item.user_headimage" mode=""></image>
							</view>
							<view class="flex-1 ml-2 mt-1">
								<view class="row-ac text-light-grey">
									<view class="font-s-4">
										{{ item.user_nickname || item.user_username }}
									</view>
									<view class="iconfont icon-bofang mx-1" style="font-size: 10px;"
										v-if="item.highest_parent !== item.parent_reply"></view>
									<view class="font-s-4" v-if="item.highest_parent !== item.parent_reply">
										{{ item.parent_user_nickname || item.parent_user_username }}
									</view>
								</view>
								<view class="mt-1 font-s-45 mr-2 comment-content">{{ item.content }}</view>
								<view class="row-ac-sb mt-2 text-light-muted flex-1 mr-3">
									<view class="row-ac font-s-35 ">
										<view>{{ item.create_time }}</view>
										<view class="ml-3" @click="replyUser(item)">回复</view>
									</view>
									<view class="row-ac font-s-3 ">
										<view class="iconfont icon-heart-2-01"></view>
										<view class="ml-1">0</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="flex-1 border-top row" style="height: 52px;">
					<view class="bottom-button-box flex-1 ml-4 mr-3 row-ac">
						<input class="px-3 py-2 flex-1" :placeholder="userNickname" v-model="formComment.content" />
						<view class="iconfont icon-aite1 ml-2"></view>
						<view class="iconfont icon-biaoqingfuhao ml-2"></view>
						<view class="send-box row ml-2" @click="sendComment">发送</view>
					</view>
				</view>
			</view>
		</leson-popup>
	</view>
</template>

<script>
	import {
		articleDetailUrl,
		articlelikesCreateUrl,
		articlelikesDeleteUrl,
		articlecollectCreateUrl,
		articlecollectDeleteUrl,
		articleCommentListUrl,
		parentCommentListUrl,
		articleCommentCreateUrl,
		articleCommentDetailUrl
	} from '@/api/article.js';
	import lesonPopup from "@/components/common/leson-popup"
	import {
		yearMonthTime,
		nowFormatTime
	} from '@/utils/time.js';
	import {
		followDeleteUrl,
		followCreateUrl,
		userInfoUrl,
	} from '@/api/index';
	export default {
		components: {
			lesonPopup
		},
		data() {
			return {
				loginStatus: false,
				commentState: true,
				replyState: false,
				statusBarHeight: '',
				headHeight:'',
				articleInfo: '',
				FormData: {
					article: ''
				},
				queryComment: {
					page: 1,
					page_size: 15
				},
				queryParent: {
					page: 1,
					page_size: 8
				},
				formComment: {
					parent_reply: '',
					parent_user: '',
					article: '',
					content: '',
					highest_parent: ''
				},
				articleId: '',
				likedState: false,
				collectState: false,
				isFollowing: false,
				followId:'',
				commentList: [],
				parentList: [],
				commentDetail: '',
				parentTotal: 0,
				currentId: '',
				lesonpopup: false,
				popupHeight: '',
				userNickname: '',
				formFollow: {
					following: ''
				},
				user_id:''
			}
		},
		mounted() {
			//计算顶部元素高度
			uni.createSelectorQuery()
				.in(this)
				.select('.article-head')
				.boundingClientRect(res => {
					this.headHeight = res.height;
				})
				.exec();
		},
		onLoad(options) {
			this.articleId = options.articleId
			this.getArticleDetail()
			this.articleCommentList()
			this.token = uni.getStorageSync('token')
			if (this.token != '') {
				this.loginStatus = true
				this.getUserInfo()
			} else {
				this.loginStatus = false
			}
		},
		created() {
			this.$getScreenInfo().then(res => {
				this.statusBarHeight = res.statusBarHeight + 8
				this.windowHeight = res.windowHeight
				this.popupHeight = this.windowHeight * 0.6
			})
		},
		methods: {
			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.user_id = res.data.id
				})
			},
			getArticleDetail() {
				this.$R.get(articleDetailUrl + this.articleId + '/').then(res => {
					if (res.code == 200) {
						this.articleInfo = res.data
						this.likedState = res.is_liked
						this.collectState = res.is_collect
						this.isFollowing = res.is_following
						this.followId = res.follow_id
					}
				})
			},
			takeLike() {
				if (this.loginStatus) {
					if (!this.likedState) {
						this.FormData.article = this.articleId
						this.$R.post(articlelikesCreateUrl, this.FormData).then(res => {
							this.getArticleDetail()
							if (res.code == 200) {
								uni.showToast({
									title: '点赞成功',
									icon: 'none'
								});
							}
						})
					} else {
						this.$R.delete(articlelikesDeleteUrl + this.articleId + '/').then(res => {
							this.getArticleDetail()
							if (res.code == 200) {
								uni.showToast({
									title: '取消点赞',
									icon: 'none'
								});
							}
						})
					}
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
				}
			},
			takeCollect() {
				if (this.loginStatus) {
					if (!this.collectState) {
						this.FormData.article = this.articleId
						this.$R.post(articlecollectCreateUrl, this.FormData).then(res => {
							this.getArticleDetail()
							if (res.data.code == 200) {
								uni.showToast({
									title: '收藏成功',
									icon: 'none'
								});
							}
						})
					} else {
						this.$R.delete(articlecollectDeleteUrl + this.articleId + '/').then(res => {
							this.getArticleDetail()
							if (res.code == 200) {
								uni.showToast({
									title: '取消收藏',
									icon: 'none'
								});
							}
						})
					}
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
				}
			},
			articleCommentList() {
				this.$R.get(articleCommentListUrl + this.articleId + '/', this.queryComment).then(res => {
					if (res.code == 200) {
						this.commentList = res.data.list
						this.commentList = res.data.list.map(item => {
							item.create_time = nowFormatTime(item.create_time);
							return item;
						});
						this.commentTotal = res.data.total
					}
				})
			},
			scrolltolower() {
				if (this.commentTotal != this.commentList.length) {
					this.queryComment.page_size += 10;
					this.articleCommentList()
				}
			},
			sendComment() {
				if (this.formComment.content == '') {
					uni.showToast({
						title: '评论内容不能为空',
						icon: 'none',
					});
				} else {
					this.formComment.article = this.articleId
					this.$R.post(articleCommentCreateUrl, this.formComment).then(res => {
						if (res.code == 200) {
							this.formComment.content = ''
							this.formComment.parent_reply = ''
							this.formComment.parent_user = ''
							uni.showToast({
								title: '发送成功',
								icon: 'none',
							});
							this.articleCommentList()
							this.getArticleDetail()
							if (this.replyState) {
								this.getParentCommentList()
							}
							this.replyState = false
						}
					})
				}
			},
			expandComment(commentId) {
				this.commentState = false
				this.currentId = commentId
				this.getParentCommentList()
				this.$R.get(articleCommentDetailUrl + commentId + '/').then(res => {
					if (res.code == 200) {
						this.commentDetail = res.data
					}
				})
			},
			getParentCommentList() {
				this.$R.get(parentCommentListUrl + this.articleId + '/' + this.currentId + '/', this.queryParent).then(
					res => {
						if (res.code == 200) {
							this.parentList = res.data.list
							this.parentList = res.data.list.map(item => {
								item.create_time = nowFormatTime(item.create_time);
								return item;
							});
							this.parentTotal = res.data.total
						}
					})
			},
			getFollow(userId) {
				if (this.loginStatus) {
					this.formFollow.following = userId
					this.isFollowing = true
					this.$R.post(followCreateUrl, this.formFollow).then(res => {
						if (res.code == 200) {
							this.getArticleDetail()
							uni.showToast({
								title: '关注成功',
								icon: 'none'
							});
						}
					})
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
				}
			},
			cancelFollow(followId) {
				this.isFollowing = false
				this.$R.delete(followDeleteUrl + followId + '/').then(res => {
					if (res.code == 200) {
						this.getArticleDetail()
						uni.showToast({
							title: '取消关注',
							icon: 'none'
						});
					}
				})
			},
			replyUser(item) {
				this.replyState = true
				if (item.user_nickname) {
					this.userNickname = '回复' + item.user_nickname
				} else {
					this.userNickname = '回复' + item.user_username
				}
				if (item.highest_parent == null) {
					this.formComment.highest_parent = item.id
				} else {
					this.formComment.highest_parent = item.highest_parent
					this.currentId = item.highest_parent
				}
				this.formComment.parent_reply = item.id
				this.formComment.parent_user = item.user
				console.log(this.replyState);
			},
			handleStatusChanged(newVal) {
				this.lesonpopup = newVal
				this.commentState = true
			},
			tapComment() {
				this.lesonpopup = true
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.article-head {
		.head-img {
			width: 78rpx;
			height: 78rpx;
			border-radius: 50%;
		}
	}

	.follow-box {
		width: 106rpx;
		height: 40rpx;
		border-radius: 20rpx;
		border: 1rpx solid #E45825;
		color: #E45825;

		.iconfont {
			font-size: 18rpx;
			margin-right: 8rpx;
		}
	}
	
	.swiper-height{
		height: 860rpx;
	}

	.my-rich-text {
		font-family: Arial, sans-serif;
		line-height: 2;
	}

	img {
		width: 100% !important;
		height: 100% !important;
	}

	.foot-box {
		height: 65px;
		background-color: #fff;

		.iconfont {
			font-size: 52rpx;
		}

		.color-one {
			color: #8B8B8B;
		}

		.color-two {
			color: #E45825;
		}
	}

	.bottom-button-box {
		height: 38px;
		border-radius: 19px;
		background-color: #f0f0f0;

		.send-box {
			width: 70px;
			height: 32px;
			border-radius: 19px;
			background-color: #E45825;
			color: #fff;
		}

		.iconfont {
			font-size: 22px;
		}
	}

	.user_headimage {
		width: 78rpx;
		height: 78rpx;
		border-radius: 50%;

		image {
			width: 78rpx;
			height: 78rpx;
			border-radius: 50%;
		}
	}

	.comment-content {
		line-height: 1.9;
	}

	.child_headimage {
		width: 58rpx;
		height: 58rpx;
		border-radius: 50%;

		image {
			width: 58rpx;
			height: 58rpx;
			border-radius: 50%;
		}
	}
</style>